﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Some slides effect</title>
	<link rel="stylesheet" href="s.css" />
</head>
<body>
	<ul id="idSlideView" class="sv">
		<li style="background-color:#D32226;"> <span>0</span> <span class="bottom">0</span> </li>
		<li style="background-color:#89C73E;"> <span>1</span> <span class="bottom">1</span> </li>
		<li style="background-color:#875FBE;"> <span>2</span> <span class="bottom">2</span> </li>
		<li style="background-color:#5C7CDA;"> <span>3</span> <span class="bottom">3</span> </li>
		<li style="background-color:#E7AD00;"> <span>4</span> <span class="bottom">4</span> </li>
	</ul>
	<br />
	模式：
	<select id="idMode">
		<option value="left">左边</option>
		<option value="right">右边</option>
	</select>
	默认索引：
	<select id="idIndex">
		<option value="">无</option>
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select>
	尺寸：
	<select id="idSize">
		<option value="[0,0]">按元素尺寸</option>
		<option value="[0.5,0]">展示占一半</option>
		<option value="[200,0]">展示200px</option>
		<option value="[0,0.1]">收缩占十分一</option>
		<option value="[0,80]">收缩80px</option>
	</select>
	<br />
	关闭：
	<select id="idClose">
		<option value="1">自动</option>
		<option value="">不自动</option>
	</select>
	速度：
	<select id="idDuration">
		<option value="20">默认</option>
		<option value="10">快速</option>
		<option value="40">慢速</option>
	</select>
	tween:
	<select id="idTween">
		<option value="">默认</option>
		<option value="1">反弹</option>
	</select>
	<br />
	<input type="button" id="idShow" value="手动展示" />
	<div id="t"></div>
	
	<br />
	<br />
	图片滑动展示效果：
	<ul id="idSlideView2" class="sv2">
		<li>
			<div><a href="http://www.google.com.hk">内裤蛋糕</a>
			神秘浪漫的内裤蛋糕礼盒</div>
			<img src="o_1.jpg">
		</li>
		<li>
			<div><a href="http://www.google.com.hk">内裤蛋糕</a>
			送给最亲密的TA~~</div>
			<img src="o_2.jpg">
		</li>
		<li>
			<div><a href="http://www.google.com.hk">内裤蛋糕</a>
			超SWEET~~打开漂亮的礼品盒，甜蜜可爱的蛋糕呈现眼前</div>
			<img src="o_3.jpg">
		</li>
		<li>
			<div><a href="http://www.google.com.hk">内裤蛋糕</a>
			好Q哦！慢慢解开丝带，竟然是一条条漂亮的内裤</div>
			<img src="o_4.jpg">
		</li>
		<li class="last">
			<div><a href="http://www.google.com.hk">内裤蛋糕</a>
			超级SWEET又脸红耶！！！</div>
			<img src="o_5.jpg">
		</li>
	</ul>
	<input type="button" id="idAuto" value="取消自动"/>
	<br />
	<br />
	
	仿口风琴(Accordion)效果
	<div id="idSlideView3" class="sv3">
		<dl>
			<dt> 图片放大效果 </dt>
			<dd>这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
			   好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。 <a href="http://www.cnblogs.com/cloudgamer/archive/2010/04/01/ImageZoom.html"> 查看全文 </a> </dd>
		</dl>
		<dl>
			<dt> Lazyload 延迟加载效果 </dt>
			<dd> Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。
			    网上也有不少类似的效果。 <a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> 查看全文 </a> </dd>
		</dl>
		<dl>
			<dt> 图片上传预览效果 </dt>
			<dd> 图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
			    使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> 查看全文 </a> </dd>
		</dl>
		<dl>
			<dt> Tween算法及缓动效果 </dt>
			<dd> Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。
			    我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html"> 查看全文 </a> </dd>
		</dl>
		<dl>
			<dt> Table行定位效果 </dt>
		    <dd> 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html"> 查看全文 </a> </dd>
		</dl>
	</div>
	
	<script type="text/javascript" src="aider.js"></script>
	<script type="text/javascript" src="s.js"></script>
	<script type="text/javascript">
	(function(){
		function $$(id){
			return "string" == typeof id ? 
					document.getElementById(id) : id;
		}
			
		var container = $$("idSlideView"),
			show = $$("idShow"),
			options = {
				onShow: function(){
					show.value = "手动关闭";
					show.onclick = function(){
						sv.close();
					}
				},
				onClose: function(){
					show.value = "手动展示";
					show.onclick = function(){
						sv.show(2);
					}
				}
			},
			sv = mooluBM(container, options);
			
		
		$$("idClose").onchange = function(){
			options.autoClose = sv.autoClose = !!this.value;
		}
		
		$$("idDuration").onchange = function(){
			options.duration = sv.duration = this.value | 0;
		}
		
		$$("idTween").onchange = function(){
			options.tween = sv.tween = this.value == ""
				? function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }
				: function(t,b,c,d){
					if ((t/=d) < (1/2.75)) {
						return c*(7.5625*t*t) + b;
					} else if (t < (2/2.75)) {
						return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
					} else if (t < (2.5/2.75)) {
						return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
					} else {
						return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
					}
				};
		}
		
		function Create(){
			sv.destroy();
			sv = mooluBM(container, options);
		}
		
		$$("idMode").onchange = function(){
			options.mode = this.value;
			Create();
		}
		
		$$("idSize").onchange = function(){
			options.max = eval(this.value + "[0]");
			options.min = eval(this.value + "[1]");
			Create();
		}
		
		$$("idIndex").onchange = function(){
			if(this.value != ""){
				options.defaultIndex = this.value | 0;
			}else{
				delete options.defaultIndex;
			}
			Create();
		}
		
		//
		var options = {
				tip : true,
				auto : true,
				mode : "right"
			},
			sv = mooluBM($$("idSlideView2"), options);
		
		$$("idAuto").onclick = function(){
			sv.destroy();
			if(options.auto){
				this.value = "自动展示";
				options.auto = false;
			}else{
				this.value = "取消自动";
				options.auto = true;
			}
			sv = mooluBM($$("idSlideView2"), options);
		}
		
		//
		mooluBM($$("idSlideView3"), {
			autoClose : false,
			defaultIndex : 0,
			min : 25,
			mode : "top",
			delay : 200,
			onShow : function(index){
				this._each(function(o, i){
					o.node.className = i == index ? "on" : "";
				});
			}
		})
		
		
	})()
	
	</script>
</body>
</html>